<template>
    <div class="outmain ba_f hygl">
        <div class="shuju_title">
            <div class="shuju_title_text">
                <span>会员管理</span>
            </div>
        </div>
        <div class="ba_f8 pad_20">
          <div class="lh25 msgtext fon_12">
            温馨提示：VIP1为初始等级,用户初次开卡默认等级为VIP1。
          </div>
        </div>
        <div class="tabledata mar_t20">
            <el-table
                    :data="list"
                    v-loading="listLoading"
                    :element-loading-text="elementLoadingText"
                    stripe
                    style="width: 100%">
                <el-table-column
                        prop="levelname"
                        label="会员等级"
                >
                    <template slot-scope="scope">
                        <div class="levelColor">{{scope.row.levelname}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="名称"
                >
                </el-table-column>
                <el-table-column
                        prop="condition"
                        label="获得等级条件"
                >
                    <template slot-scope="scope">
                        <div v-show="scope.row.condition">{{scope.row.condition}}成长值</div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="membership"
                        label="会员权益"
                >
                    <template slot-scope="scope">
                        <div v-show="scope.row.rights.length">
                            <div v-for="item in scope.row.rights" :key="item">{{item}}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="upgrade"
                        label="升级礼包"
                >
                    <template slot-scope="scope">
                        <div>
                            <div v-show="scope.row.isBalance=='1'">送余额{{scope.row.balance}}元</div>
                            <div v-show="scope.row.isIntegral=='1'">送{{scope.row.integral}}积分</div>
                            <div v-show="scope.row.isGrowth=='1'">送{{scope.row.growth}}成长值</div>
                            <div v-show="scope.row.isCoupon=='1'">送优惠券</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="启用状态"
                >
                    <template slot-scope="scope">
<!--                        <div class="flex" v-show="scope.row.id">已启用</div>-->
                        <div class="flex" v-show="scope.row.id">
                          <el-switch v-model="scope.row.display" active-value="1" inactive-value="2"
                                     @change="changeSwitch(scope.row)"></el-switch>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="face"
                        label="卡面"
                >
                    <template slot-scope="scope">
                        <div class="flex colorbg" v-show="scope.row.bgType=='1'" :style="{background:scope.row.color}"></div>
                        <div class="flex colorbg" v-show="scope.row.bgType=='2'" :style="{background:'url(' + scope.row.bgImg + ') center center / cover no-repeat'}"></div>
                    </template>
                </el-table-column>
<!--                <el-table-column-->
<!--                        prop="num"-->
<!--                        label="会员数"-->
<!--                >-->
<!--                </el-table-column>-->
                <el-table-column
                        label="操作"
                >
                    <template slot-scope="scope">
                        <div class="flex">
                            <el-button type="text" @click="handleEdit(scope.row)" v-show="scope.row.level">编辑</el-button>
                            <el-button type="text" @click="handlepz(scope.row)" v-show="!scope.row.id">待配置</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
import {modifyLevel, levelList,} from "@/api/user";
    export default {
        created() {
          this.fetchData();
        },
        data() {
            return {
                formInline: {
                    keyword: '',
                    timeData: ''
                },
                list: [
                    {
                        levelId: '1',
                        levelname: 'VIP1',
                        name: '',
                        color: '',
                        condition: '',
                        rights: [],
                        id: '',
                        balance: '',
                        bgImg: '',
                        bgType: '',
                        coupon: [],
                        growth: '',
                        integral: '',
                        isBalance: '',
                        isCoupon: '',
                        isGrowth: '',
                        isIntegral: '',
                        level: '',
                        display: '',
                    },
                    {
                        levelId: '2',
                        levelname: 'VIP2',
                        name: '',
                        color: '',
                        condition: '',
                        rights: [],
                        id: '',
                        balance: '',
                        bgImg: '',
                        bgType: '',
                        coupon: [],
                        growth: '',
                        integral: '',
                        isBalance: '',
                        isCoupon: '',
                        isGrowth: '',
                        isIntegral: '',
                        level: '',
                      display: '',
                    },
                    {
                        levelId: '3',
                        levelname: 'VIP3',
                        name: '',
                        color: '',
                        condition: '',
                        rights: [],
                        id: '',
                        balance: '',
                        bgImg: '',
                        bgType: '',
                        coupon: [],
                        growth: '',
                        integral: '',
                        isBalance: '',
                        isCoupon: '',
                        isGrowth: '',
                        isIntegral: '',
                        level: '',
                      display: '',
                    },
                    {
                        levelId: '4',
                        levelname: 'VIP4',
                        name: '',
                        color: '',
                        condition: '',
                        rights: [],
                        id: '',
                        balance: '',
                        bgImg: '',
                        bgType: '',
                        coupon: [],
                        growth: '',
                        integral: '',
                        isBalance: '',
                        isCoupon: '',
                        isGrowth: '',
                        isIntegral: '',
                        level: '',
                      display: '',
                    },
                    {
                        levelId: '5',
                        levelname: 'VIP5',
                        name: '',
                        color: '',
                        condition: '',
                        rights: [],
                        id: '',
                        balance: '',
                        bgImg: '',
                        bgType: '',
                        coupon: [],
                        growth: '',
                        integral: '',
                        isBalance: '',
                        isCoupon: '',
                        isGrowth: '',
                        isIntegral: '',
                        level: '',
                      display: '',
                    },
                    {
                        levelId: '6',
                        levelname: 'VIP6',
                        name: '',
                        color: '',
                        condition: '',
                        rights: [],
                        id: '',
                        balance: '',
                        bgImg: '',
                        bgType: '',
                        coupon: [],
                        growth: '',
                        integral: '',
                        isBalance: '',
                        isCoupon: '',
                        isGrowth: '',
                        isIntegral: '',
                        level: '',
                      display: '',
                    },
                    {
                        levelId: '7',
                        levelname: 'VIP7',
                        name: '',
                        color: '',
                        condition: '',
                        rights: [],
                        id: '',
                        balance: '',
                        bgImg: '',
                        bgType: '',
                        coupon: [],
                        growth: '',
                        integral: '',
                        isBalance: '',
                        isCoupon: '',
                        isGrowth: '',
                        isIntegral: '',
                        level: '',
                      display: '',
                    },
                    {
                        levelId: '8',
                        levelname: 'VIP8',
                        name: '',
                        color: '',
                        condition: '',
                        rights: [],
                        id: '',
                        balance: '',
                        bgImg: '',
                        bgType: '',
                        coupon: [],
                        growth: '',
                        integral: '',
                        isBalance: '',
                        isCoupon: '',
                        isGrowth: '',
                        isIntegral: '',
                        level: '',
                      display: '',
                    },
                    {
                        levelId: '9',
                        levelname: 'VIP9',
                        name: '',
                        color: '',
                        condition: '',
                        rights: [],
                        id: '',
                        balance: '',
                        bgImg: '',
                        bgType: '',
                        coupon: [],
                        growth: '',
                        integral: '',
                        isBalance: '',
                        isCoupon: '',
                        isGrowth: '',
                        isIntegral: '',
                        level: '',
                      display: '',
                    },
                    {
                        levelId: '10',
                        levelname: 'VIP10',
                        name: '',
                        color: '',
                        condition: '',
                        rights: [],
                        id: '',
                        balance: '',
                        bgImg: '',
                        bgType: '',
                        coupon: [],
                        growth: '',
                        integral: '',
                        isBalance: '',
                        isCoupon: '',
                        isGrowth: '',
                        isIntegral: '',
                        level: '',
                      display: '',
                    },
                ],
                selectRows: "",
                listLoading:false,
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },

            }
        },
        methods: {
            async fetchData() {
              this.listLoading = true;
              const {data} = await levelList({page: this.page.currentPage});
              for(let i=0;i<this.list.length;i++){
                  if(data[i]){
                      this.list[i].name = data[i].name
                      this.list[i].color = data[i].color
                      this.list[i].condition = data[i].condition
                      this.list[i].rights = data[i].rights
                      this.list[i].id = data[i].id
                      this.list[i].balance = data[i].balance
                      this.list[i].isBalance = data[i].isBalance
                      this.list[i].isCoupon = data[i].isCoupon
                      this.list[i].isGrowth = data[i].isGrowth
                      this.list[i].isIntegral = data[i].isIntegral
                      this.list[i].integral = data[i].integral
                      this.list[i].growth = data[i].growth
                      this.list[i].coupon = data[i].coupon
                      this.list[i].bgType = data[i].bgType
                      this.list[i].bgImg = data[i].bgImg
                      this.list[i].level = data[i].level
                      this.list[i].display = data[i].display
                  }
              }
              // this.list.name = data.map((v => ({
              //     name: v.name,
              // })))
              // this.page.total = count;
              this.listLoading = false;
            },
            setSelectRows(val) {
              this.selectRows = val;
            },
            async changeSwitch(row) {
              const {msg} = await modifyLevel({id: row.id, display: row.display});
              this.$baseMessage(msg, "success");
              this.fetchData();
            },
            handlepz(row) {
                this.$router.push(`/vipmangeadd?level=${row.levelId}`);
            },
            handleEdit(row){
                this.$router.push(`/vipmangeadd?level=${row.level}&id=${row.id}`);
            },
            handleCurrentChange(val) {
              this.page.currentPage = val;
              this.fetchData();
            },
        }
    }
</script>
<style lang="scss">
    .hygl{
        .levelColor{
            color: #c95a0a;
        }
        .colorbg{
            width: 64px;
            height: 34px;
            border-radius: 3px;
            overflow: hidden;
        }
        .el-button+.el-button {
            margin-left: 0px;
        }
    }
</style>
